<template>
  <div class="show" v-show="showFlag" @click="change">
    <van-swipe ref="swipe">
      <van-swipe-item class="img" v-for="(item, index) in imgList1" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
      <!-- <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template> -->
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: ["imgList", "showFlag"],
  data(){
    return {
        imgList1:this.imgList
    }
  },
  computed:{
    total(){
        return this.imgList.length
    }
  },
  created(){
  },
  methods: {
    change() {
      this.$emit("showTag");
    }
  },
  watch:{
    showFlag(){
        console.log(15334);
		var _this = this;
        setTimeout(() => {
            _this.$refs.swipe.resize();
        }, 1);
    }
  }
};
</script>

<style scoped lang="scss">
.show {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #000000;
  display: flex;
  align-items: center;
  .img {
    width: 100%;
    height: auto;
    img {
      width: 100%;
      height: auto;
    }
  }
}
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>